<template>
    <el-button type="primary" @click="openDialog">
        <slot></slot>
    </el-button>
    <div class="yy-ui-dailog-container">
        <el-dialog
                v-model="dialogVisible"
                :title="title"
                width="50%"
        >
            <el-scrollbar height="450px">
                <div class="container">
                    <div class="item" v-for="(item, index) in Object.keys(ElementPlusIcons)" :key="index" @click="handleCopy(item)">
                        <component :is="`el-icon-${toLine(item)}`"></component>
                        <div class="name">{{item}}</div>
                    </div>
                </div>
            </el-scrollbar>
            <template #footer>
              <span class="dialog-footer"></span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import * as ElementPlusIcons from '@element-plus/icons-vue'
    import { toLine } from '../../utils/index'
    import { useCopy } from "../../hooks/useCopy";

    defineOptions({
        name: 'ChooseIcon'
    })
    let props = defineProps<{
        title: string
    }>()

    let dialogVisible = ref(false)

    const openDialog = () => {
        dialogVisible.value = true
    }
    const handleCopy = (text: string) => {
        console.log(text)
        useCopy(`<el-icon-${toLine(text)} />`)
    }
</script>

<style scoped>
    .container{
        display: flex;
        flex-wrap: wrap;
    }
    .item{
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }
    svg{
        width: 2em;
        height: 2em;
    }
    .name{
        font-size: 12px;
        margin-top: 6px;
    }
</style>
